import "../assets/css/head.scss";
import { Popup, PopupPosition } from "react-vant";
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";

export default function Head() {
  const [state, setState] = useState<PopupPosition>("");
  const { pathname } = useLocation();
  const [activeidx, setactiveidx] = useState(0);
  const navigate = useNavigate();
  const [avatar, setAvatar] = useState("");
  const [realName, setrealName] = useState("");
  const items = [
    {
      path: "/home",
      name: "仪表盘",
    }, {
      path: "/home",
      name: "日程",
    }, {
      path: "/message",
      name: "消息",
    }, {
      path: "/course",
      name: "我的课程",
    }, {
      path: "/home",
      name: "我的数据",
    }, {
      path: "/home",
      name: "评价",
    }, {
      path: "/home",
      name: "我的账号",
    },
  ];
  useEffect(() => {
    switch (pathname) {
      case "/home":
        setactiveidx(0);
        break;
      case "/course":
        setactiveidx(3);
        break;
      case "/message":
        setactiveidx(2)
        break;
    }
    const data = JSON.parse(localStorage.getItem('user'))
    if (data) {
      setAvatar(data.note.avatar)
      setrealName(data.note.realName)
    }
  });
  const handelClick = (path: any) => {
    navigate(path)
  };
  const onClose = () => setState("");
  return (
    <div className="header">
      <div className="goback" onClick={() => setState("left")}>
        <img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u1921.svg" />
      </div>
      <div className="message-icon">
        <img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u1924.svg" />
      </div>
      <div className="remind-icon">
        <img src="	https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u1927.svg" />
      </div>
      <div className="img-head">
        <img src={avatar} alt="" />
      </div>
      <Popup
        visible={state === "left"}
        style={{ width: "60vw", height: "100%" }}
        position="left"
        onClose={onClose}
      >
        <div className="popup-title">
          <span>{realName}</span>
        </div>
        <div className="popup-main">
          {items.map((item, index) => (
            <div
              className={activeidx === index ? "item active" : "item"}
              key={index}
              onClick={() => {
                handelClick(item.path);
              }}
            >
              <span>{item.name}</span>
            </div>
          ))}
        </div>
        <div className="popup-foot">
          <div className="square">
            <p>升级你的计划从这里开始</p>
            <button className="btn">获取专业版</button>
          </div>
        </div>
      </Popup>
    </div>
  );
}
